<template>
	<div>
		<div class="zzc" v-if="showzzc" @click="close"></div>
		<div class="main">
			<div class="per_left">
				<div class="per_title">
					<div class="per_title_left">
						<img src="@assets/images/png.png" alt="">
						<div>角色列表</div>
					</div>
					<img src="@assets/images/+.png" @click="addshow=true" alt="" v-if="$permissions.indexOf(89)  != -1">
				</div>

				<div class="pre_list">
					<div :class="act == index?'per_li act':'per_li'" v-for="item,index in list" @click="chose(index)">
						<div class="per_li_l">
							<div class="per_cur"></div>
							<div>{{item.name}}</div>
						</div>
						<div class="perr" @click="id=item.id;names=item.name;delshow=true"
							v-if="$permissions.indexOf(95)  != -1">
							<div class="per_li_r">
							</div>
						</div>

					</div>
				</div>
			</div>

			<div class="per_right">
				<div class="per_tab">
					<div @click="changetab(0)" :class="tab == 0?'per_tab_li tabact':'per_tab_li'">菜单权限 </div>
					<div @click="changetab(1)" :class="tab == 1?'per_tab_li tabact':'per_tab_li'">角色用户 </div>
				</div>
				<div class="tabsecsion" v-show="tab == 0">
					<div class="socl">
						<list-menu style="margin-top: -30px;" :arr='rlist' :role="role" :addarr="addarr" :disabledKey="list[act].name"
							:id="list[act].id" v-on:change="change" v-model="selectVal" value-key='id'
							label-key='nodeName' />
					</div>
					<div v-if="list[act].name!='管理员'" style="margin-top: 20px;display: flex;justify-content: center;">
						<el-button type="primary" @click="add">确定</el-button>
					</div>

				</div>
				<div class="tabsecsion" v-show="tab == 1">
					<div class="search_box">
						<input type="text" v-model="word" class="form-control search_inp" placeholder="这里输入关键词">
						<div class="sea_btn sear_btns" @click="page=1;words=word;getulist()">
							<img src="@assets/images/search.png" alt="">
							查询
						</div>
						<div class="add_btn sear_btns"
							@click="getrooms();page2=1;word2s=word2;getenglist();alert_show=true"
							v-if="$permissions.indexOf(89)  != -1">
							<img src="@assets/images/add.png" alt="">
							新增
						</div>
						<div class="del_btn sear_btns" @click="delopen" v-if="$permissions.indexOf(95)  != -1">
							<img src="@assets/images/del.png" alt="">
							删除
						</div>
					</div>
					<div class="table-responsive mt-20">
						<h2 class="tcent" v-if="ulist.length ==0">暂时没有数据</h2>
						<table class="table table-hover" v-else>
							<tr>
								<th style="width: 50px;" v-if="$permissions.indexOf(95)  != -1">
									<input type="checkbox" @change="changeall" v-model="choseall" name="all"
										id="aper"><label for="aper"></label>
								</th>
								<!-- <th class="tcent">序号</th> -->
								<th class="tcent">账号</th>
								<th class="tcent">姓名</th>

								<th>所属科室</th>
								<th>所属小组</th>
							</tr>

							<tr v-for="item,index in ulist">
								<td style="width: 50px;" v-if="$permissions.indexOf(95)  != -1">
									<input type="checkbox" v-model="item.chosesf" @change="chosechange" name="chose"
										:id="'aper'+item.id"><label :for="'aper'+item.id"></label>
								</td>
								<!-- <td class="tcent">{{item.id}}</td> -->
								<td class="tcent">{{item.userName}}</td>
								<td class="tcent">{{item.realName}}</td>

								<td>{{item.departName}}</td>
								<td>{{item.groupName}}</td>
							</tr>
						</table>

						<div class="page_box">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="page" :page-sizes="[10, 30, 60, 100]" :page-size="limit"
								layout="total, sizes, prev, pager, next, jumper" :total="inglen">
							</el-pagination>
						</div>
					</div>
				</div>

			</div>
		</div>

		<div class="alzzc" v-if="addshow">
			<div class="del_alert">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>新增角色
					<div class="right" @click="name='';remark='';addshow=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">
					<div class="line">
						<div class="line_title"><span>*</span>角色名称：</div>
						<input type="text" v-model="name" class="form-control">
					</div>
					<div class="line">
						<div class="line_title">描述：</div>
						<textarea name="" id="" maxlength="200" v-model="remark"></textarea>
					</div>
					<div class="alert_zhu">角色添加完成后，请在该角色中勾选角色功能权限</div>
				</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="addpeo">确认</div>
					<div class="alert_close" @click="name='';remark='';addshow=false">取消</div>
				</div>
			</div>
		</div>

		<!--选择添加工程师-->
		<div :class="alert_show?'modal in fade':'modal fade'" role="dialog"
			:style="alert_show?'align-items: center;justify-content: center;display: flex;z-index:199':''" id="engineer">
<!-- style="height: 660px;margin-top: calc(50vh - 350px);margin-left: calc(50vw - 350px);" -->
			<div class="cent w700" style="height: 865px;max-width: 955px;max-height:calc(100vh - 50px)">

				<div class="modal-dialog" role="document">
					<div class="modal-content" style="overflow: visible;">

						<div class="zzc" v-if="showzzc" @click="close" style="top: -140px;left: calc(-50vw + 31%);">
						</div>
						<div class="modal-header tit">
							<em></em>添加用户到角色
							<div class="right" @click="closealert">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										class="iconfont icon-cha" aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100" style="overflow-x: hidden;overflow-y:scroll;height:760px;max-height:calc(100vh - 150px)">
							<div class="left">
								<div class="zTreeDemoBackground">
									<ul id="treeDemo2" class="ztree" @select="choseroom"></ul>
								</div>
							</div>
							<div class="right" style="overflow: visible;">
								<div class="search">
									<!-- <form> -->
									<div class="form-group" style="display: flex;padding-right: 0;">
										<input class="form-control" autocomplete="off"
											@keydown.enter="page2=1;word2s=word2;getenglist()" v-model="word2"
											placeholder="输入关键字">
										<div style="margin-left: 10px;" class="btn btn-success"
											@click="page2=1;word2s=word2;getenglist()">
											<span class="iconfont icon-chaxun"
												style="line-height: 34px;vertical-align: baseline;"></span>
										</div>
									</div>
									<!-- </form> -->
								</div>
								<div class="txt-black">为您找到{{inglen2}}位 <span class="txt-blue">用户</span> </div>

								<div class="enr_alert_scorll">
									<div style="height: 552px;">
									<h2 class="tcent" style="margin-top: 0;padding-top: 20px;" v-if="englist.length ==0">暂时没有数据</h2>
									<table class="table table-hover smallTab" v-else>
										<tr>
											<th><input type="checkbox" @change="changeall2" v-model="choseall2"
													name="all2" id="aa2"><label for="aa2"></label></th>
											<th>账号</th>
											<th>姓名</th>
											<th>电话</th>
										</tr>
										<tr v-for="item,index in englist">
											<td>
												<input type="checkbox" v-model="item.chosesf" @change="chosechange2"
													name="chose2" :id="'ca'+item.id"><label :for="'ca'+item.id"></label>
											</td>
											<td>{{item.userName }}</td>
											<td>{{item.realName}}</td>
											<td>{{item.phoneNo}}</td>
										</tr>
									</table>
									</div>
									<div class="Spage" style="margin: 10px 0;">
										<el-pagination @current-change="handleCurrentChange2" :current-page="page2"
											style="display: flex;justify-content: center;" :pager-count="5"
											:page-size="10" layout="prev, pager, next" :total="inglen2">
										</el-pagination>
									</div>


									<div class="tcent" style="margin-bottom: 30px;">
										<button class="btn btn-primary" @click="delopen('add')">确定</button>&emsp;
										<button class="btn btn-default" @click="closealert()">关闭</button>
									</div>
								</div>


							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="alzzc" v-if="delalert">
			<div class="del_alert" style="height: 218px;">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>信息
					<div class="right" @click="delalert=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">确认要从该角色中删除选中的<span>{{delnum}}</span>个用户吗？</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="del">确认</div>
					<div class="alert_close" @click="delalert=false">取消</div>
				</div>
			</div>
		</div>

		<div class="alzzc" v-if="delshow">
			<div class="del_alert" style="height: 200px;">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>删除角色
					<div class="right" @click="id='';delshow=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">
					确定删除该角色？
				</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="delpeo">确认</div>
					<div class="alert_close" @click="id='';delshow=false">取消</div>
				</div>
			</div>
		</div>


		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>

</template>

<script>
	import Vue from 'vue'
	import ListMenu from '@/components/tree.vue'
	export default {
		name: "",
		data() {
			return {
				rlist: [],
				list: [],
				ulist: [],
				role: [],
				types: [],
				selectVal: {},
				delshow: false,
				addshow: false,
				showloading: false,
				choseall: false,
				alert_show: false,
				delalert: false,
				showzzc: false,
				tab: 0,
				act: 0,
				id: "",
				name: "",
				names: "",
				words: "",
				word: "",
				word2: "",
				word2s: "",
				remark: "",
				page: 1,
				page2: 1,
				limit: 10,
				limit2: 10,
				inglen: '',
				inglen2: 0,
				num: '',
				acc: '',
				phone: '',
				extTelNum: '',
				password: '',
				email: '',
				remark: '',
				sex: 1,
				delnum: 0,
				dept: "选择部门",
				deptId: "",
				reg: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
				options_show: false,
				choseall2: false,
				ind: 'all',
				addarr: [],
				bumenid: "",
				setting: {
					treeId: 'id',
					data: {
						key: {
							name: 'name'
						}
					},
					callback: {
						onClick: this.choseroom
					}
				},
				zNodes: [],
				englist: [],
				treeClickCount: 0,
				carr: []
			}
		},
		components: {
			ListMenu
		},
		watch: {
			rlist: {
				handler(newValue, oldValue) {
					// console.log(newValue)
				}
			},
		},
		mounted() {
			this.getenglist()
			this.getlist()
			this.gettype()
			// this.getrooms()

		},
		methods: {
			// 获取科室
			getrooms() {
				var param = {
					parentId: 0
				}
				var that = this
				this.$http.post(this.$url + '/sys/dept/tree', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.zNodes = response.data.data
						that.ztree_obj = $.fn.zTree.init($("#treeDemo2"), that.setting, that.zNodes);
						console.log(that.ztree_obj)
						var nodes4 = that.ztree_obj.getNodes();
						for (var i = 0; i < nodes4.length; i++) { //设置节点展开
							that.ztree_obj.expandNode(nodes4[i], true, false, true);
						}
						console.log(that.ztree_obj)
						that.page2 = 1
						that.getenglist();
					})
					.catch(function(error) {
						console.log(error);

						that.$Toast('网络拥堵，刷新一下');
					});

			},
			handleCurrentChange2(val) {
				console.log(`当前页: ${val}`);
				this.page2 = val
				this.getenglist()
			},
			closealert() {
				this.choseall2 = false
				this.alert_show = false;
				this.word2 = ''
				this.word2s = ''
				this.bumenid = ''
				this.ztree_obj.cancelSelectedNode();
				this.getenglist()
			},
			changeall2() {
				if (this.choseall2) {
					for (var i = 0; i < this.englist.length; i++) {
						this.englist[i].chosesf = true
					}
				} else {
					for (var i = 0; i < this.englist.length; i++) {
						this.englist[i].chosesf = false
					}
				}
			},
			chosechange2() {
				for (var i = 0; i < this.englist.length; i++) {
					console.log(i)
					if (this.englist[i].chosesf == true) {
						this.choseall2 = true
					} else {
						this.choseall2 = false
						break
					}

				}
				this.$forceUpdate()
			},
			choseroom(data, node, treeNode) {
				this.treeClickCount++;
				if (this.treeClickCount >= 2) {
					return;
				}
				var that = this
				this.timer = window.setTimeout(() => {
					if (that.treeClickCount == 1) {
						that.treeClickCount = 0;
						console.log('单击事件,可在此处理对应逻辑')
						that.bumenid = treeNode.id
						that.page2 = 1
						that.getenglist()
					} else if (that.treeClickCount > 1) {
						that.treeClickCount = 0;
						console.log('双击事件,可在此处理对应逻辑')
					}
				}, 300);
			},
			getenglist() {
				this.showloading = true
				this.choseall2 = false

				var bumenid = this.bumenid ? this.bumenid : ''

				var that = this

				var url = encodeURI(this.$url + '/sys/user/list?page=' + this.page2 + '&limit=' + this.limit2 +
					'&userName=' + this.word2s + '&deptId=' + bumenid);

				this.$http.get(url)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.englist = response.data.data.records
						for (var i = 0; i < that.englist.length; i++) {
							that.englist[i].chosesf = false
							that.englist[i].id = window.atob(that.englist[i].id)
						}
						that.inglen2 = response.data.data.total
						that.num2 = response.data.data.pages
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);

						that.$Toast('网络拥堵，刷新一下');
					});

			},
			add() {
				// for (var i = 0; i < this.addarr.length; i++) {
				// 	this.addarr[i] = JSON.stringify(this.addarr[i])
				// }
				console.log(this.$permissions.indexOf(91))
				if (this.$permissions.indexOf(91) == -1) {
					this.$Toast('暂无权限');
					return
				}
				var param = this.addarr

				var that = this
				this.$http.post(this.$url + '/sys/right/updateAll', param, {
						headers: {
							'content-type': 'application/json'
						}
					})
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.getprower()
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			getprower() {
				var that = this
				var param = {
					userName: sessionStorage.getItem('userName')
				}
				this.$http.post(this.$url + '/sys/right/person', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						sessionStorage.setItem('permissions', response.data.data)
						var per = sessionStorage.getItem('permissions').split(',')
						for (var i = 0; i < per.length; i++) {
							per[i] = parseInt(per[i])
						}
						Vue.prototype.$permissions = per
						that.$permissions = per
						// location.reload()
						// that.$router.go(0)
					})
					.catch(function(error) {
						console.log(error);
						// that.$Toast('网络拥堵，刷新一下');
					});
			},
			change(data) {
				if (this.$permissions.indexOf(91) == -1) {
					this.$Toast('暂无权限');
					return
				}
				var obj = {
					roleId: this.list[this.act].id,
					rightId: data.id
				}
				if (data.checkf) {
					if (this.addarr.indexOf(obj) == -1) {
						this.addarr.push(obj)
					}

				} else {
					for (var i = 0; i < this.addarr.length; i++) {
						if (this.addarr[i].roleId == obj.roleId && this.addarr[i].rightId == obj.rightId) {
							this.addarr.splice(i, 1)
						}
					}
				}
				// if(this.list[this.act].name=='管理员'){
				// 	this.add()
				// }
				
			},

			delopen(type) {
				var ids = ''
				var num = 0
				var a = ''
				if (type == 'add') {
					for (var i = 0; i < this.englist.length; i++) {
						if (this.englist[i].chosesf == true) {
							ids = ids + '' + this.englist[i].id + ','
							if (this.englist[i].userName == 'admin') {
								a = 'admin'
							}
							num++
						}
					}
				} else {
					for (var i = 0; i < this.ulist.length; i++) {
						if (this.ulist[i].chosesf == true) {
							if (this.ulist[i].userName == 'admin') {
								a = 'admin'
							}
							ids = ids + '' + this.ulist[i].id + ','
							num++
						}
					}
				}

				this.ids = ids.substring(0, ids.length - 1)

				if (this.ids == '') {
					this.$Toast('暂无选中');
					return
				}
				this.delnum = num
				if (type == 'add') {
					if (a == 'admin') {
						this.$Toast('不能更改admin账号');
						return
					}
					this.sure()
				} else {
					if (a == 'admin') {
						this.$Toast('不能删除admin账号');
						return
					}
					this.delalert = true
				}

			},
			// 删除
			del() {
				this.delalert = false
				var param = {
					ids: this.ids,
					id: this.list[this.act].id
				}
				var that = this
				this.$http.post(this.$url + '/sys/role/deleteOnes', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.page = 1
						that.getlist(that.parentId)
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},

			chosechange() {
				for (var i = 0; i < this.ulist.length; i++) {
					if (this.ulist[i].chosesf == true) {
						this.choseall = true
					} else {
						this.choseall = false
						break
					}

				}
			},
			changeall() {
				if (this.choseall) {
					for (var i = 0; i < this.ulist.length; i++) {
						this.ulist[i].chosesf = true
					}
				} else {
					for (var i = 0; i < this.ulist.length; i++) {
						this.ulist[i].chosesf = false
					}
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.limit = val
				this.getulist()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page = val
				this.getulist()
			},
			selectit(index) {
				if (index == 'all') {
					this.dept = '全部'
					this.deptId = ''
				} else {
					this.dept = this.types[index].name
					this.deptId = this.types[index].id
				}
				this.options_show = false
				this.showzzc = false
			},
			// 获取部门
			gettype() {
				this.showloading = true

				var that = this
				this.$http.get(this.$url + '/sys/dept/select')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.types = response.data.data
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);

						that.$Toast('网络拥堵，刷新一下');
					});

			},
			getulist() {
				this.showloading = true
				this.choseall = false

				var param = {
					page: this.page,
					limit: this.limit,
					id: this.list[this.act].id,
					name: this.words
				}
				var that = this
				this.$http.post(this.$url + '/sys/role/findOneForAll', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.ulist = response.data.data
						for (var i = 0; i < that.ulist.length; i++) {
							that.ulist[i].chosesf = false
						}
						that.inglen = response.data.count
						if (that.inglen > that.limit) {
							that.num = Math.ceil(that.inglen / that.limit)
						} else {
							that.num = 1
						}
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);

						that.$Toast('网络拥堵，刷新一下');
					});

			},
			// 表单提交
			sure() {

				this.showloading = true
				var that = this
				var param = {
					ids: this.ids,
					id: this.list[this.act].id
				}

				this.$http.post(this.$url + '/sys/role/updateOnes', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						if (response.data.success == true) {

							that.$Toast(response.data.msg);
							that.alert_show = false
							that.choseall2 = false
							that.page2 = 1
							that.word2 = ''
							that.bumenid = ''
							that.ztree_obj.cancelSelectedNode();
							that.getenglist()
							that.getulist()
						} else {

							that.showloading = false
							that.$Toast(response.data.msg);
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});

			},
			// 点击遮罩层
			close() {
				for (var i = 0; i < this.ulist.length; i++) {
					this.ulist[i].static = false
				}
				this.showzzc = false
			},

			getrole(id) {
				this.showloading = true
				var that = this
				// console.log(this.list)
				this.$http.get(this.$url + '/sys/right/getRoleAllRight?id=' + id)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.role = response.data.data
						console.log(that.addarr)
						for (var i = 0; i < that.role.length; i++) {
							that.addarr.push({
								roleId: id,
								rightId: that.role[i]
							})
						}
						that.$forceUpdate()

					})
					.catch(function(error) {
						console.log(error);

						that.$Toast('网络拥堵，刷新一下');
					});
			},
			changetab(i) {
				this.tab = i
			},
			delpeo() {

				if (this.names == '管理员') {
					this.$Toast('不能删除管理员角色');
					return
				}
				this.showloading = true
				var that = this
				var param = {
					id: this.id
				}
				this.$http.post(this.$url + '/sys/role/deleteOne', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.delshow = false
						that.act = 0
						that.id = ''
						that.getlist()
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			addpeo() {
				this.showloading = true
				var that = this
				var param = {
					name: this.name,
					remark: this.remark,
				}
				this.$http.post(this.$url + '/sys/role/insertOne', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.addshow = false
						that.name = ''
						that.remark = ''
						that.getlist()
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			chose(i) {
				this.act = i
				this.page = 1
				this.word = ''
				this.words = ''
				this.getrlist()
				this.getulist()
			},
			getrlist() {
				// this.showloading = true
				var that = this

				this.$http.get(this.$url + '/sys/right/findAll')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.rlist = response.data
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);

						that.$Toast('网络拥堵，刷新一下');
					});

			},
			getlist() {
				this.showloading = true
				var that = this

				this.$http.get(this.$url + '/sys/role/findAll')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.list = response.data.data
						that.carr = []
						for (var i = 0; i < that.list.length; i++) {
							that.carr.push(that.list[i].id)
							that.getrole(that.list[i].id)
						}
						that.getulist()
						that.getrlist()
					})
					.catch(function(error) {
						console.log(error);

						that.$Toast('网络拥堵，刷新一下');
					});

			},
		}
	}
</script>

<style scoped>
	.tcent {
		text-align: center;
	}

	.search_inp {
		width: 356px;
		margin-bottom: 0;
	}

	/deep/ .el-pagination__total {
		height: 33px !important;
		line-height: 33px !important;
	}

	/deep/ .el-input--mini .el-input__inner {
		height: 33px;
	}

	/deep/.el-pagination__editor.el-input .el-input__inner {
		height: 33px;
	}

	.page_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}

	/deep/ .el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	.search_box {
		margin-top: 30px;
	}

	/deep/ .el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	/deep/ .el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	/deep/ .el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.radio div {
		display: flex;
		align-items: center;
		color: #000;
		margin-right: 50px;
		cursor: pointer;
	}

	.radio {
		width: 360px;
		display: flex;

	}

	input[type='checkbox'] {
		opacity: 0;
		position: absolute;
		z-index: -2;
	}

	input[type="checkbox"]+label {
		width: 16px;
		height: 16px;
		border: 1px solid #c8c8c8;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 0;
		box-sizing: border-box;
		margin-right: 7px;
	}

	input[type="checkbox"]+label::before {
		content: '';
		display: block;
		margin-bottom: 0;
		box-sizing: border-box;
	}

	input[type="checkbox"]:checked+label {
		border: 1px solid #0075ff;
		box-sizing: border-box;
		background: #0075ff url(../../assets/images/dui.png) no-repeat;
		background-size: 80% 80%;
		background-position-x: 80%;
		background-position-y: 50%;
	}

	input[type="checkbox"]:checked+label::before {
		background: #0075ff;
	}

	td,
	th {
		font-size: 14px;
		color: #333;
		/* line-height: 22px; */
		padding: 10px;
		border-top: 0;
		border-bottom: 1px solid #eee;
	}

	/deep/ .el-checkbox__inner {
		width: 16px;
		height: 16px;
	}


	/deep/ .el-checkbox__inner::after {
		height: 7px;
		left: 3px;
		top: 1px;
		width: 5px;
	}

	.per_group {
		display: flex;
		flex-wrap: wrap;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: bold;
	}


	.tabact {
		border-radius: 30px;
		background: #4286F5;
		color: #fff;
	}

	.per_tab_li {
		width: 50%;
		height: 30px;
		cursor: pointer;

	}

	.per_tab {
		width: 240px;
		height: 30px;
		background: #EEEEEE;
		border-radius: 30px;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.socl {
		height: calc(100vh - 300px);
		margin-top: 30px;
		overflow: scroll;
	}

	.per_right {
		background: #fff;
		width: 100%;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
		padding: 40px;
	}

	.alert_zhu {
		width: 440px;
		color: #db9d46;
		background: #f9efe5;
		margin: 20px auto 0;

	}

	textarea {
		padding: 0 10px;
		outline: none;
	}

	.line textarea {
		border: 1px solid #ccc;
	}

	.del_alert {
		width: 500px;
		height: 340px;
	}

	.line_title span {
		color: red;
		font-size: 14px;
	}

	.line {
		display: flex;
		margin-top: 19px;
		justify-content: center;

	}

	.line_title {
		font-size: 14px;
		color: #000000;
		line-height: 34px;
		width: 80px;
		text-align: right;
	}

	.act .per_cur,
	.act .per_li_r {
		background-color: #4286F5;
	}

	.act .per_li_l {
		color: #4286F5;
	}

	.act {
		background-color: #f0f4fd;
	}

	.per_li_r {
		width: 17px;
		height: 4px;
		border-radius: 4px;
		background: #ccc;
	}

	.perr {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.per_li {
		padding: 0 20px;
		height: 45px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #000000;
		cursor: pointer;
	}

	.per_li_l {
		display: flex;
		align-items: center;
	}

	.per_cur {
		width: 8px;
		height: 8px;
		border-radius: 100%;
		background: #ccc;
		margin-right: 6px;
	}

	.per_title img {
		width: 17px;
	}

	.per_title_left img {
		width: 3px;
		margin-right: 8px;
	}

	.per_title_left {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #000000;
	}

	.per_title {
		width: 197px;
		height: 45px;
		background: #FFFFFF;
		border-radius: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
	}

	.per_left {
		min-width: 197px;
		background: #f8f8f8;
		height: 100%;
	}

	.main {
		display: flex;
		align-items: stretch;
		padding: 30px;
		background: #f2f2f2;
		height: calc(100vh - 50px);
	}
</style>
